<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位小技巧(一)</title>
    <style>
        /* 1.左右广告条 */
        .left,.right {
            width: 60px;
            height: 200px;
            /* 固定定位的参照物为html根元素(页面) */
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #0aa1ed;
            left: 20px;
        }
        .right {
            background-color: deeppink;
            right: 20px;
        }
        /* 2.设置顶部广告条 */
        .top {
            background-color: lightpink;
            height: 120px;
            color: #e8e8e8;
            font-size: 30px;
            position: fixed;
            top: 0;
            /* 脱离文档流 无法继承原本父元素的宽度 因此需要重新设置宽度 */
            width: 100%;
        }
        /* 为了防止顶部条遮盖最上层的文字内容 可以给内容块设置一个向上外间距 使其向下移动 */
        .main {
            margin-top: 130px;
        }
    </style>
</head>
<body>
<div class="top">顶部广告条</div>
<div class="left">左侧广告条</div>
<div class="right">右侧广告条</div>
<div class="main">
    <!-- lorem*60 + tab -->
    <div>测试文字遮挡Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet animi, autem eligendi error est fugiat
        iusto magnam molestiae, mollitia nihil, praesentium quas quidem quisquam reiciendis sit sunt vero voluptatem.
    </div>
    <div>Dolores nihil porro quaerat ullam veniam. Ab animi asperiores ex, explicabo facere iure natus, nulla
        praesentium provident quae quis saepe totam voluptatum. Aperiam consequatur cumque laboriosam minima pariatur
        porro veritatis?
    </div>
    <div>Accusamus at cum dolore doloremque dolores, id, illum laborum minus, natus nesciunt obcaecati possimus
        quibusdam quidem ratione soluta! Architecto commodi debitis eius error illo maiores modi necessitatibus
        perferendis repudiandae voluptatem.
    </div>
    <div>Dicta dolorem eos error suscipit voluptas. A atque consequuntur corporis dolor excepturi expedita facilis
        fugiat incidunt ipsa minus nemo nisi nulla officiis perferendis praesentium quasi quia repellat repellendus
        tenetur, veritatis!
    </div>
    <div>At, commodi consequuntur corporis cum dicta doloribus ea, enim eveniet exercitationem fugit illo illum ipsa
        iusto, magni minus modi mollitia pariatur perferendis placeat quasi quod sed temporibus tenetur! Eligendi, modi.
    </div>
    <div>Atque, ex illo in ipsa neque, numquam pariatur perferendis qui ratione reiciendis, similique unde veniam
        voluptas? Autem commodi, cupiditate eius error nesciunt quo totam veniam voluptatibus! Cum ea magnam
        perspiciatis!
    </div>
    <div>Beatae doloribus molestias perferendis quas quia, rem rerum sed? Adipisci assumenda at aut ducimus esse
        excepturi fuga id incidunt ipsa laborum nisi qui quis quo reiciendis rem saepe sunt, voluptate!
    </div>
    <div>Ad aperiam facere libero odit quod rerum tempora voluptates. Ea, esse excepturi expedita fugit illo illum, in
        laboriosam libero nostrum nulla officiis quibusdam similique sint ullam velit? Eos, natus, tempora.
    </div>
    <div>A accusantium assumenda at aut beatae cum dolor ducimus ea facilis illum impedit incidunt iste, libero
        molestias necessitatibus neque, nostrum odit porro quaerat quas quis similique soluta unde velit voluptatum?
    </div>
    <div>Aliquam aliquid animi autem commodi consequatur corporis cumque deserunt eveniet exercitationem iste iure,
        laboriosam magnam magni minus perferendis quasi ratione repellat repellendus sequi similique tempore unde
        voluptate voluptatum. Autem, nulla?
    </div>
    <div>Aspernatur et exercitationem fugit ipsa minima natus nihil, quasi? Deserunt eos magni molestiae praesentium
        voluptatibus. Amet delectus dolores eos et illum, inventore ipsa omnis quam quibusdam repellendus sapiente
        similique, tenetur.
    </div>
    <div>Aliquid consectetur debitis deleniti dicta dolorem eius facere, fugit itaque numquam placeat praesentium
        quaerat quidem quis quisquam rem, repudiandae rerum saepe, sapiente velit vitae. Adipisci dolorem fugit incidunt
        recusandae saepe.
    </div>
    <div>Amet consequuntur deleniti ducimus, exercitationem illum ipsa itaque nam neque, nisi officia, quo similique
        soluta vel. Dolor dolorum laudantium magnam veritatis. At consectetur cumque maiores neque officiis optio quos
        sunt!
    </div>
    <div>Dolorem facere, illum? Blanditiis cum ipsa odio recusandae sit! Assumenda facilis fugit quae quod similique
        voluptates! Debitis, est fuga iure nam nesciunt non obcaecati odit placeat, provident quae reiciendis, ut.
    </div>
    <div>Ab architecto at consequuntur cupiditate dicta dolore doloremque dolores dolorum, eos error et eum inventore
        maiores nam nemo, nisi placeat quae quaerat quasi, quis quod repellat reprehenderit temporibus voluptate
        voluptatum?
    </div>
    <div>Cumque, eaque id illum impedit incidunt iste minus nesciunt. Debitis est fugit, minima necessitatibus officiis
        porro quisquam rerum voluptates voluptatibus? Ab commodi dolore doloribus itaque provident, quas? Ducimus, illo,
        odit.
    </div>
    <div>Accusamus cupiditate enim eos, in ipsa obcaecati quas quibusdam quidem quod rem similique suscipit, temporibus!
        Culpa cum dignissimos error exercitationem expedita, ipsum laudantium maxime, odio quaerat quis, soluta vel
        vero.
    </div>
    <div>A alias aliquid, aspernatur consequatur cupiditate dignissimos dolores earum eius enim error eveniet excepturi
        fuga illo ipsum laborum libero maxime nam necessitatibus neque non quod quos sed temporibus ullam voluptates?
    </div>
    <div>Ad aliquid amet aspernatur beatae, debitis doloremque dolores ducimus esse eveniet exercitationem ipsa maiores,
        nam necessitatibus nihil obcaecati placeat porro quaerat quas quo soluta tempora, veniam voluptas! Facilis
        maiores, minima.
    </div>
    <div>Amet aperiam assumenda, aut consequatur cumque eos facilis impedit incidunt ipsa laboriosam laudantium magnam
        possimus quasi, sed tempore vel voluptatibus! At ducimus incidunt pariatur! Dolor ducimus non quia rerum
        suscipit.
    </div>
    <div>Adipisci aspernatur cum eos esse harum, impedit magnam minus natus, nesciunt numquam perferendis quae quo
        repellendus reprehenderit sapiente tempora veniam voluptatem! Beatae dolore harum sit tempore, ullam vero. A,
        odit!
    </div>
    <div>Alias amet doloribus et fuga id, maiores molestiae molestias placeat quod soluta? Ab atque, enim eos error
        exercitationem id impedit, inventore ipsam, porro quae sed unde? Atque officiis sapiente voluptatibus!
    </div>
    <div>A amet aspernatur aut, consequatur eum eveniet excepturi expedita iusto libero, magni, molestias pariatur
        perspiciatis quam reprehenderit sequi vitae voluptatum. Architecto cum, eligendi enim iste libero non quod
        voluptatibus voluptatum.
    </div>
    <div>Culpa, debitis fuga ipsum minus quas sit ullam! Assumenda consequatur delectus dicta dolor eos et impedit
        molestiae nihil numquam officia placeat quam quis, rerum temporibus totam unde veritatis voluptas? Commodi.
    </div>
    <div>Amet asperiores aut beatae commodi consequuntur culpa deleniti earum eius enim esse eveniet exercitationem
        explicabo id, iste, necessitatibus non, odio officia porro quas quos repudiandae similique sint ullam vero
        voluptatibus?
    </div>
    <div>Accusantium assumenda dolores dolorum eos est id in itaque numquam odio officia officiis, perferendis possimus
        qui quibusdam quisquam quos tempora totam velit veritatis vero. Assumenda consequatur magnam maiores provident
        tempora.
    </div>
    <div>Accusamus alias animi, aperiam at consequuntur culpa cumque dolorum ducimus eligendi et illo illum maxime
        quisquam repellat reprehenderit saepe similique tempora temporibus voluptate voluptatibus. Architecto assumenda
        aut ipsam laborum! Ullam.
    </div>
    <div>Accusantium alias asperiores aspernatur atque corporis delectus deserunt dicta distinctio ea, eum fugit harum
        in incidunt inventore ipsam itaque maiores natus perspiciatis quaerat quasi quia quod suscipit. Dolores,
        praesentium, veniam?
    </div>
    <div>A ab adipisci consequatur dignissimos dolor earum enim eos esse eveniet facilis in iste labore nesciunt, nulla
        qui quos repellat similique soluta sunt tenetur unde vel veniam, voluptas, voluptate voluptates?
    </div>
    <div>Aspernatur consequatur nulla odit recusandae sed soluta! Beatae et laboriosam ut. Amet est exercitationem natus
        nemo quas. Aut commodi eos nihil numquam, perspiciatis quas quis, sit vel velit veniam voluptatum.
    </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi asperiores ex expedita, fugit, hic
        incidunt maiores molestias neque non omnis optio praesentium quo saepe suscipit ut voluptates. Impedit,
        veritatis.
    </div>
    <div>Accusantium eligendi impedit minima minus quod repellat! Accusantium adipisci dolores ducimus ea explicabo
        fugiat iusto, modi nam natus nesciunt nihil odio odit quasi quia recusandae reiciendis saepe tenetur ullam
        veritatis.
    </div>
    <div>Ab consequatur consequuntur doloribus, fuga impedit ipsa minus, nobis quisquam, repellendus reprehenderit
        sapiente sed sunt ullam. Accusantium asperiores, aut commodi exercitationem laudantium minima nam nemo nisi non
        omnis placeat quia.
    </div>
    <div>Ab aliquid distinctio fuga incidunt nemo officia officiis voluptas. Asperiores aut dignissimos earum eos error
        molestias necessitatibus nobis obcaecati optio perferendis porro quae quas reiciendis, repellat rerum ullam
        veritatis voluptas?
    </div>
    <div>Ab autem blanditiis distinctio earum enim esse illum incidunt inventore iure modi numquam possimus quod
        reiciendis, repellat soluta temporibus ut vero voluptate! Adipisci dignissimos neque nostrum. Aliquam nesciunt
        possimus ut!
    </div>
    <div>Accusamus labore neque quo reiciendis repellat! Amet beatae doloremque dolores iusto modi quam repellendus
        tempora totam. Adipisci aperiam aut corporis deleniti dignissimos dolores, eaque maxime minima odit omnis,
        pariatur praesentium.
    </div>
    <div>Aliquid consequuntur mollitia sit. Aperiam et ipsa quos sed. Accusamus at illo minima molestias, odio officia
        praesentium provident quod voluptatum. Accusamus blanditiis debitis, earum eos itaque quis quo quos suscipit.
    </div>
    <div>Ad aliquid animi deserunt dicta dolor dolorum ea fugit in, ipsa iure libero minus nisi obcaecati officia
        possimus provident quae, quasi quia quisquam, recusandae reiciendis rerum temporibus ullam voluptas voluptatum.
    </div>
    <div>Consequuntur debitis eos est id iusto maxime nam. Dicta ea laborum, nihil nisi officia qui quos ratione
        recusandae. Alias cum ea ipsam odio sequi vitae voluptates! Esse nostrum possimus quis.
    </div>
    <div>Aut consectetur consequatur culpa debitis distinctio doloremque, doloribus enim eveniet id laborum, non
        praesentium, quasi qui quia quos saepe soluta sunt totam? At commodi quasi quo rem. Enim, fuga, rerum.
    </div>
    <div>Adipisci aliquam corporis cum fuga fugit, minima necessitatibus pariatur quaerat repudiandae saepe. Alias
        assumenda eveniet explicabo quos tempora. Amet assumenda cum dolor doloremque, ea libero neque nobis non tempora
        ut.
    </div>
    <div>Amet aperiam at commodi cupiditate dolor dolores ea eligendi enim et exercitationem harum id iusto, laudantium
        maxime mollitia non officia pariatur qui quidem ratione reiciendis rem reprehenderit repudiandae saepe totam.
    </div>
    <div>Accusamus aperiam atque consectetur delectus dicta, dignissimos enim error eveniet illo inventore ipsa ipsum
        labore libero magni, nesciunt officia qui quia quo repellat repellendus sunt suscipit totam ullam voluptate
        voluptatum?
    </div>
    <div>Accusantium dicta esse est harum hic officia ut vel, veniam. Accusamus aliquam assumenda, cum ducimus expedita,
        fuga officiis pariatur quas qui reprehenderit saepe sapiente totam. Cupiditate dolore esse mollitia nam.
    </div>
    <div>Adipisci architecto at beatae commodi cupiditate dolorum ducimus enim esse facilis ipsa ipsam ipsum libero modi
        mollitia, numquam odit, officia pariatur placeat quae quaerat sed suscipit, tempora tempore ullam veritatis!
    </div>
    <div>Cum doloremque earum impedit magnam officia quo quod, reprehenderit tempore. Consectetur eligendi et excepturi,
        facilis libero molestiae molestias, nihil nisi omnis perferendis perspiciatis repellendus saepe tempora.
        Assumenda fuga iusto neque!
    </div>
    <div>Asperiores doloribus porro rem! Aliquam, at beatae, dolorem expedita harum illum laudantium minus, nesciunt
        obcaecati quidem repellat tenetur. Blanditiis consectetur dignissimos et ipsa laborum magnam officia omnis,
        optio perspiciatis ut.
    </div>
    <div>A accusantium assumenda blanditiis culpa cumque dolorum earum est fuga illum incidunt natus nemo nesciunt nihil
        nostrum numquam odio omnis optio reiciendis repudiandae sequi similique sit, soluta tenetur veniam voluptatibus.
    </div>
    <div>Animi dolorem ea facilis molestias quaerat reiciendis tempora. Amet autem blanditiis cumque, dolorem doloremque
        ea esse excepturi facere in laborum molestiae natus nesciunt, officiis omnis quisquam sapiente sit tempore
        velit!
    </div>
    <div>Aliquam aspernatur deserunt earum esse est illum inventore, ipsa laudantium maxime natus neque non odio qui
        quis sunt unde veniam. Architecto blanditiis cumque deserunt dolores nesciunt officiis reiciendis rem voluptas.
    </div>
    <div>Iste, praesentium quibusdam. Amet asperiores, at atque consectetur cumque cupiditate dignissimos eligendi enim
        ipsam itaque libero minima nobis optio, porro quam quia quos repellendus rerum sapiente ut voluptas voluptatibus
        voluptatum.
    </div>
    <div>Accusamus esse fuga, illo ipsa maxime nemo nulla quod voluptatibus? Ad, alias delectus eaque eligendi nam natus
        nisi perspiciatis ullam voluptate! Accusamus asperiores, aut dolorum et officia repellendus ullam vero!
    </div>
    <div>Accusamus aliquam aliquid, animi, aperiam architecto dolores eaque impedit ipsam mollitia nam nemo neque odio
        perferendis perspiciatis provident quae quod ratione repellendus repudiandae totam ullam velit veniam? In
        minima, nihil.
    </div>
    <div>Accusantium alias aliquam autem consequatur cum distinctio dolore ea eos excepturi exercitationem expedita
        explicabo id ipsa itaque magni modi nisi, nulla porro quibusdam repudiandae sit vero voluptas? Aliquam esse,
        tempora.
    </div>
    <div>Blanditiis consequuntur esse minima perspiciatis, provident repudiandae temporibus. Dolore exercitationem ipsum
        optio perspiciatis quasi quos reiciendis vel! A adipisci architecto autem dolorum maxime mollitia quam
        reiciendis, similique veniam voluptates. Omnis.
    </div>
    <div>Accusantium adipisci aliquam aspernatur corporis earum est eum ex expedita fugiat, harum, illo ipsa ipsum
        libero magni nihil nostrum nulla officiis perferendis praesentium provident quam qui quos sint sit, velit.
    </div>
    <div>Laboriosam, perspiciatis, qui. Animi aspernatur atque cumque dicta earum eius error ex fugiat hic illo minus
        mollitia nam nesciunt nisi odio quaerat quidem repudiandae sapiente sequi, soluta tempore voluptas voluptatibus!
    </div>
    <div>Eius, illo, modi. A ad aspernatur assumenda commodi consectetur dolor doloremque eius eligendi ipsam maiores
        modi molestias neque nulla officia, omnis provident quam quia quisquam quod rem repellendus rerum sint.
    </div>
    <div>Accusamus adipisci amet dolores, ducimus ea eligendi est eveniet ex fugit labore laborum, modi molestias nulla
        provident quia quo recusandae rem repellat sapiente sequi sit ut veniam! Eaque quisquam, tempora.
    </div>
    <div>Accusamus alias aliquid atque beatae consequatur, consequuntur debitis deleniti distinctio dolores explicabo
        fugiat fugit impedit iure labore libero maiores maxime necessitatibus, neque nesciunt non nulla omnis qui quos
        ratione rerum.
    </div>
</div>
</body>
</html>